<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>用户中心 - 泉州文化地图</title>
    <!-- 字体 -->
    <link href="css/fonts.css" rel="stylesheet">
    <!-- 样式 -->
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/user.css"> 
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/map.css">
    <!-- 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body class="dark-mode">

<!-- 粒子背景容器 -->
<div id="particles-js"></div>

<!-- 主体容器 -->
<div class="page-wrapper">

    <!-- 顶部信息栏 -->
    <div class="top-bar">
        <div class="container">
            <span><i class="fas fa-phone"></i> 旅游咨询：1234-567890</span>
            <span><i class="fas fa-clock"></i> 开放时间：08:00 - 18:00</span>
            <div class="language-switcher">
                <a href="#" class="active">中文</a>
                <a href="#">English</a>
            </div>
        </div>
    </div>

    <!-- 导航栏 -->
    <header class="navbar">
        <div id="navigationBar">
            <div class="logo">
                <img src="images/logo.jpg" alt="泉州文化地图">
                <h1>智游泉州</h1>
            </div>
            <nav class="main-nav">
                <ul class="nav-menu">
                    <li class="nav-item"><a href="index.html">首页</a></li>
                    <li class="nav-item"><a href="heritage-list.html">世遗景点</a></li>
                    <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
                        特色体验
                      </a>
                      <div class="dropdown-menu">
                    	<a class="dropdown-item" href="intangible-culture.html">非遗传承</a>
                    	<a class="dropdown-item" href="food-map.html">美食打卡</a>
                    </li>
                    <li class="nav-item"><a href="historical-research.html">历史研学</a></li>
                    <li class="nav-item"><a href="study-materials.html">学习资源</a></li>
                    <li class="nav-item"><a href="ai-itinerary.html">AI行程规划</a></li>
                    <li class="nav-item active user-actions">
                        <a href="user-center.html" class="user-icon"><i class="fas fa-user-circle"></i></a>
                    </li>
                </ul>
            </nav>
            <button class="menu-toggle" aria-label="切换导航菜单">
                <i class="fas fa-bars"></i>
            </button>
        </div>
    </header>

    <!-- 主体内容 -->
    <main class="main-content container user-container">

        <!-- 用户信息卡 -->
        <section class="user-profile">
            <div class="avatar">
                <i class="fas fa-user-circle"></i>
            </div>
            <h2 class="username">旅行者小泉</h2>
            <div class="user-badge">
                <span class="badge">Lv.5</span>
                <span>资深文旅爱好者</span>
            </div>
        </section>

        <!-- 数据统计 -->
        <section class="user-stats">
            <div class="stat-card">
                <i class="fas fa-heart"></i>
                <h3>收藏夹</h3>
                <p>12 个地点</p>
            </div>
            <div class="stat-card">
                <i class="fas fa-map-marker-alt"></i>
                <h3>足迹地图</h3>
                <p>已访问 8 个世遗点</p>
            </div>
            <div class="stat-card">
                <i class="fas fa-coins"></i>
                <h3>积分余额</h3>
                <p>2350 积分</p>
            </div>
        </section>

        <!-- 可折叠模块 -->
        <section class="accordion-section">
            <div class="accordion">
                <div class="accordion-header">
                    <h4>我的收藏</h4>
                    <i class="fas fa-chevron-down toggle-icon"></i>
                </div>
                <div class="accordion-body">
                    <ul>
                        <li>开元寺</li>
                        <li>清净寺</li>
                        <li>洛阳桥</li>
                        <li>提线木偶体验课</li>
                        <li>阿秋面线糊</li>
                    </ul>
                </div>
            </div>

            <div class="accordion">
                <div class="accordion-header">
                    <h4>浏览记录</h4>
                    <i class="fas fa-chevron-down toggle-icon"></i>
                </div>
                <div class="accordion-body">
                    <ul>
                        <li>泉州非遗传承</li>
                        <li>泉州美食地图</li>
                        <li>南音演奏课程</li>
                        <li>海丝之路研究论文</li>
                    </ul>
                </div>
            </div>

            <div class="accordion">
                <div class="accordion-header">
                    <h4>账户设置</h4>
                    <i class="fas fa-chevron-down toggle-icon"></i>
                </div>
                <div class="accordion-body">
                    <ul>
                        <li>修改密码</li>
                        <li>绑定手机</li>
                        <li>隐私设置</li>
                    </ul>
                </div>
            </div>
        </section>

        <!-- 主题切换按钮 -->
        <section class="theme-toggle">
            <label class="switch">
                <input type="checkbox" id="darkModeToggle" checked>
                <span class="slider round"></span>
            </label>
            <span>暗黑模式</span>
        </section>

    </main>

    <!-- 回到顶部按钮 -->
    <a href="#top" class="back-to-top" aria-label="回到顶部">
        <i class="fas fa-arrow-up"></i>
    </a>

    <!-- 页脚 -->
    <footer class="site-footer">
        <div class="container">
            <div class="footer-grid">
                <div class="footer-section">
                    <h3>关于本站</h3>
                    <p>"智游泉州"文旅平台致力于打造一站式泉州文化旅游服务平台，整合泉州优质旅游资源，为游客提供智能化、个性化的旅行体验。</p>
                </div>
                <div class="footer-section">
                    <h3>快速链接</h3>
                    <ul class="footer-links">
                        <li><a href="#">常见问题</a></li>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="#">隐私政策</a></li>
                        <li><a href="#">使用条款</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>关注我们</h3>
                    <div class="social-icons">
                        <a href="#"><i class="fab fa-weibo"></i></a>
                        <a href="#"><i class="fab fa-weixin"></i></a>
                        <a href="#"><i class="fab fa-qq"></i></a>
                        <a href="#"><i class="fab fa-facebook"></i></a>
                    </div>
                </div>
            </div>
            <div class="copyright">
                <p>&copy; 2025 泉州文化旅游发展有限公司 版权所有</p>
                <p>技术支持：<a href="#">2人团队</a></p>
            </div>
        </div>
    </footer>

</div>

<!-- 粒子背景初始化 -->
<script>
particlesJS.load('particles-js', 'js/particles.json', function() {
    console.log('particles.js loaded');
});
</script>

<!-- JS 交互 -->
<script>
document.addEventListener('DOMContentLoaded', function () {
    // 折叠面板
    document.querySelectorAll('.accordion-header').forEach(header => {
        header.addEventListener('click', () => {
            const body = header.nextElementSibling;
            const icon = header.querySelector('.toggle-icon');
            body.style.display = body.style.display === 'block' ? 'none' : 'block';
            icon.classList.toggle('fa-chevron-down');
            icon.classList.toggle('fa-chevron-up');
        });
    });

    // 主题切换
    const toggle = document.getElementById('darkModeToggle');
    toggle.addEventListener('change', () => {
        document.body.classList.toggle('dark-mode');
    });
});
</script>
</body>
</html>